<template>
  <div class="step-form-warp" :style="styleHeight()">
    <div class="user-role-warp-box" ref="userRoleWarpBoxRef">
      <el-form :inline="true"  ref="" size="small" style="height:51px;overflow:hidden;">
        <el-form-item label="学号">
          <el-input placeholder="报备人学号" v-model="reportQueryParam.stuNumber" ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input placeholder="报备人姓名" v-model="reportQueryParam.userName" ></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="reportQueryParam.banId" placeholder="选择班级">
            <el-option v-for="(item,index) in allGrade" :key="index" :label="item.bname" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getNotReportUser">查询</el-button>
          <el-button type="info" icon="el-icon-refresh-left" @click="resetReportQueryParam">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
          :border="true"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :default-sort = "{}">
        <el-table-column
            type="selection"
            width="">
        </el-table-column>
        <el-table-column
            prop="stuNumber"
            label="学号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="bName"
            label="行政班级"
            width="180">
        </el-table-column>
        <el-table-column
            prop="userName"
            label="姓名">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="success "
                @click="send(scope.row.phone)">人工通知</el-button>
            <el-button
                size="mini"
                type="success "
                @click="send(-1)">发送通知短息</el-button>
            <el-button
            size="mini"
            type="success "
            @click="send(-2)">自动语音电话</el-button>
          </template>
        </el-table-column>
      </el-table>
            <el-dialog
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
              <span>{{phone}}</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
            </el-dialog>
    </div>
  </div>
</template>

<script>
import {notReportUser} from '@/api/report/index'
import {getAllClassByFid} from "@/api/user";
import {getSession} from "@/utils/storage";
export default {
  name: 'advancedForm',
  data() {
    return {
      phone:'',
      tableData: [
      ],
      reportQueryParam:{
        banId:'',
        fid:'',
        userName:'',
        pageSize:10,
        pageNumber: 1,
        stuNumber:''
      },
      allGrade:[],
      PageInfo:{
        total:10
      },
      dialogVisible:false
    }
  },
  activated() {
    this.styleHeight()
  },
  mounted() {
    this.getUserInfo();
    this.getAllClass(this.fid);
    this.getNotReportUser();
  },
  methods: {

    handleClose(done) {
      done();
    },
    resetReportQueryParam() {
      this.reportQueryParam = {
        banId: '',
        fid: '',
        userName: '',
        pageSize: 10,
        pageNumber: 1,
        stuNumber: ''
      }
    },
    getNotReportUser(){
      notReportUser(this.reportQueryParam).then(res=>{
        this.tableData = res.data
      }).catch()
    },
    styleHeight() {
      let { layout, isTagsView } = this.$store.state.layoutConfig;
      if (layout === 'fashion' || layout === 'strange') {
        if (isTagsView) {
          return {
            height: `calc(100vh - 114px)`
          }
        } else {
          return {
            height: `calc(100vh - 80px)`
          }
        }
      } else {
        return {
          height: `calc(100vh - 80px)`
        }
      }
    },
    send(phone){

      this.dialogVisible=true;
      if (phone==-1){
        this.phone= '个人短信接口未通过审核，请绑定企业账号';
      }else if (phone==-2){
        this.phone= '个人语音电话接口未通过审核，请绑定企业账号';
      }else {
        this.phone = '请拨打电话:'+phone;
      }
    },
    handleSizeChange(val) {
      this.reportQueryParam.pageSize=val;
      this.getAllLeaves();
    },
    handleCurrentChange(val) {
      this.reportQueryParam.pageNumber=val;
      this.getAllLeaves();
    },
    //获取缓存
    getUserInfo(){
      this.fid = getSession('userInfo').finstructor.id;
      this.reportQueryParam.fid=getSession('userInfo').finstructor.id;
    },
    //通过辅导员id查询所管辖的班级
    getAllClass(value){
      getAllClassByFid(value).then(res => {
        this.allGrade = res.data
      }).catch(() => {console.log("xxx") })
    }
  }
}
</script>

<style scoped lang="scss">
.step-form-warp {
  border-radius: 0px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: auto;
  color: #303133;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03) !important;
  margin: 15px;
  .step-form-warp-box {
    max-width: 1000px;
    margin: 30px auto;
    ::v-deep .el-step__title.is-process {
      color: #09f !important;
      font-weight: normal !important;
    }
    ::v-deep .el-step__head.is-process {
      color: #09f !important;
      border-color: #09f !important;
    }
    ::v-deep .is-success {
      .el-step__line {
        background-color: #67c23a !important;
      }
    }
  }
}
</style>